<template>
  <n-card :bordered="false" class="proCard" ref="tableCard">
    <!-- <SearchForm>
      <n-form-item label="姓名" label-width="80" label-placement="left">
        <n-input v-model:value="formData.name" placeholder="输入姓名" />
      </n-form-item>
      <n-form-item label="年龄" label-width="80" label-placement="left">
        <n-input v-model:value="formData.age" placeholder="输入年龄" />
      </n-form-item>
      <n-form-item label="电话号码" label-width="80" label-placement="left">
        <n-input v-model:value="formData.phone" placeholder="电话号码" />
      </n-form-item>

      <n-form-item label="姓名" label-width="80" label-placement="left">
      <n-input v-model:value="formData.name" placeholder="输入姓名" />
      </n-form-item>
      <n-form-item label="年龄" label-width="80" label-placement="left">
        <n-input v-model:value="formData.age" placeholder="输入年龄" />
      </n-form-item>
      <n-form-item label="电话号码" label-width="80" label-placement="left">
        <n-input v-model:value="formData.phone" placeholder="电话号码" />
      </n-form-item>
      
      <n-form-item label="姓名" label-width="80" label-placement="left">
      <n-input v-model:value="formData.name" placeholder="输入姓名" />
      </n-form-item>
      <n-form-item label="年龄" label-width="80" label-placement="left">
        <n-input v-model:value="formData.age" placeholder="输入年龄" />
      </n-form-item>
      <n-form-item label="电话号码" label-width="80" label-placement="left">
        <n-input v-model:value="formData.phone" placeholder="电话号码" />
      </n-form-item>
    </SearchForm> -->
    <n-form label-width="80" label-placement="left">
      <n-grid responsive="screen" :cols="5" :collapsed="isCollapse">
        <n-gi>
          <n-form-item label="姓名">
            <n-input v-model:value="formData.name" placeholder="输入姓名" />
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="年龄">
            <n-input v-model:value="formData.age" placeholder="输入年龄" />
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="电话号码">
            <n-input v-model:value="formData.phone" placeholder="电话号码" />
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="姓名">
            <n-input v-model:value="formData.name" placeholder="输入姓名" />
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="年龄">
            <n-input v-model:value="formData.age" placeholder="输入年龄" />
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="电话号码">
            <n-input v-model:value="formData.phone" placeholder="电话号码" />
          </n-form-item>
        </n-gi>
        <n-gi :suffix="true">
          <n-space align="center" justify="end">
            <n-button type="info" @click="onClickSearch">查询</n-button>
            <n-button @click="onClickReset">重置</n-button>
            <n-button type="primary" icon-placement="right" text @click="onClickCollapse">
              <template #icon>
                <n-icon size="14" v-if="isCollapse">
                  <DownOutlined />
                </n-icon>
                <n-icon size="14" v-else>
                  <UpOutlined />
                </n-icon>
              </template>
              {{ isCollapse ? '展开' : '收起' }}
            </n-button>
          </n-space>
        </n-gi>
      </n-grid>
    </n-form>
    <BaseTable
      ref="baseTable"
      :row-key="(row) => row.id"
      :remote="true"
      :columns="tableColumns"
      :data="tableData"
      :pagination="pagination"
      :loading="tableLoading"
      :striped="true"
      @update:page="updatePage"
      @update:page-size="updatePageSize"
      @fullScreen="fullScreen"
    >
    <template #tableTitle>
      <n-button type="info" @click="onClickAdd">新增</n-button>
    </template>
    </BaseTable>
  </n-card>
</template>
<script lang="ts">
import {h,defineComponent,ref,reactive,onMounted,nextTick,ComponentPublicInstance} from 'vue';
import { DownOutlined, UpOutlined } from '@vicons/antd';
import { NTag ,NAvatar,PaginationProps,useMessage,type NCard} from 'naive-ui';
import { getTableList } from '@/api/table/list';
// import SearchForm from './component/SearchForm.vue';
import BaseTable from './component/BaseTable.vue';
import { useFullscreen } from '@vueuse/core';
import type {UseFullscreenReturn} from '@vueuse/core';

interface ITableData {
  id:number;
  name:string;
  avatar:string;
  beginTime:string;
  date:string;
  endTime:string;
  no:number;
  status:boolean;
  time:string;
  address:string;
}
type TableExposeProperties = { setTableHeight(): void }
export default defineComponent({
  components:{
    DownOutlined,
    UpOutlined,
    // SearchForm,
    BaseTable
  },
  setup(){
    const message = useMessage();
    const isCollapse = ref<boolean>(true);
    const tableCard = ref<InstanceType<typeof NCard>|null>(null);
    const baseTable = ref<ComponentPublicInstance<{},TableExposeProperties>|null>(null);
    const formData = ref({
      name:'',
      age:'',
      phone:''
    });
    let fullscreenUse:UseFullscreenReturn;
    const tableColumns = [
      {title:'id',key:'id'},
      {title:'编码',key:'no'},
      {title:'名称',key:'name'},
      {title:'头像',key:'avatar',render(row){
          return h(NAvatar,{src:row.avatar,size:'large','object-fit':'contain'});
        }},
      {title:'地址',key:'address'},
      {title:'开始时间',key:'beginTime'},
      {title:'结束时间',key:'endTime'},
      {title:'状态',key:'status',render(row){
          return h(NTag,{type:row.status?'success':'error'},{default:()=>row.status?'启用':'禁用'});
        }
      },
      {title:'创建时间',key:'date'},
      {title:'停留时间',key:'time'},
    ]
    const tableLoading = ref<boolean>(false);
    const tableData = ref<Array<ITableData>>([]);
    const pagination = reactive<PaginationProps>({
      page:1,
      pageSize:10,
      itemCount:0,
      showSizePicker:true,
      pageSizes:[10,20,50,100]
    });
    
    onMounted(()=>{
      fullscreenUse = useFullscreen(tableCard.value?.$el);
      loadTable();
    });
    const onClickCollapse = ()=>{
      isCollapse.value = !isCollapse.value;
      nextTick(()=>{
        baseTable.value?.setTableHeight();
      })
      
    }
    const onClickSearch = ()=>{
      message.success('您点击了查询按钮');
    }
    const onClickReset = ()=>{
      message.success('您点击了重置按钮');
    }
    const loadTable = ()=>{
      tableLoading.value = true;
      getTableList({pageSize:pagination.pageSize,page:pagination.page}).then(res=>{
        pagination.itemCount = res.pageCount;
        tableData.value = res.list;
      }).finally(()=>{
        tableLoading.value = false;
      });
    }
    const onClickAdd = ()=>{
      message.success('您点击了添加按钮');
    }
    const updatePage = (value)=>{
      pagination.page = value;
      loadTable();
    }

    const updatePageSize = (value)=>{
      pagination.page = 1;
      pagination.pageSize = value;
      loadTable();
    }
   
    const fullScreen = ()=>{
      fullscreenUse.toggle();
    }
    return {
      tableCard,
      isCollapse,
      onClickCollapse,
      onClickSearch,
      onClickReset,
      formData,
      baseTable,
      tableColumns,
      tableData,
      pagination,
      tableLoading,
      updatePage,
      updatePageSize,
      fullScreen,
      onClickAdd
    }
  }
});
</script>
<style lang="less" scoped>
</style>
